<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="目标产品" prop="productId">
        <el-select v-model="form.productId" placeholder="请选择">
          <el-option
            v-for="item in allProducts"
            :key="item.productId"
            :label="item.productId"
            :value="item.productId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品数" prop="productNum">
        <el-input-number
          v-model="form.productNum"
          :min="10"
          :max="1000000"
          :step="10"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="截止日期" prop="deadline">
        <el-date-picker
          v-model="form.deadline"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getAllProducts } from '../../../api/product/getAllProducts'
  import { modifyOrder } from '../../../api/order/modifyOrder'

  export default {
    name: 'TableEdit',
    data() {
      return {
        orderId: '',
        form: {
          orderId: '',
          productId: '',
          productNum: '',
          deadline: '',
        },
        rules: {
          productId: [
            { required: true, trigger: 'blur', message: '请选择产品' },
          ],
          productNum: [
            { required: true, trigger: 'blur', message: '请选择产品数量' },
          ],
          deadline: [
            { required: true, trigger: 'blur', message: '请选择截止日期' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        allProducts: [],
      }
    },
    created() {},
    methods: {
      showEdit(row) {
        getAllProducts().then((res) => {
          this.allProducts = res
          if (!row) {
            this.title = '添加新订单'
          } else {
            this.title = '编辑订单 ' + row.orderId
            this.form = Object.assign({}, row)
          }
          this.dialogFormVisible = true
        })
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
        this.$parent.fetchData0()
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            modifyOrder(this.form).then(() => {
              this.$baseMessage('操作成功！', 'success')
              this.close()
            })
          } else {
            return false
          }
        })
      },
    },
  }
</script>
